<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数扩展运算符</title>
</head>
<body>
  
</body>

<script type="text/javascript">

  // 1、扩展运算符
  // 剩余运算符：把多个独立的参数合并到一个数组中
  // 扩展运算符：将一个数组分割，并将各个项作为分离的参数传给函数

  // 案例：处理数组中的最大值
  let arr = [10, 50, 30, 60, 20]
  // es5写法：apply
  console.log(Math.max.apply(null, arr));

  // es6写法：扩展运算符
  console.log(Math.max(...arr));

  // 2、es6箭头函数
  // 使用 => 来定义，=>{} 等价于 function(){}

  function add(a, b = 10) {
    console.log(a + b);
  }
  add(5)

  // 多个参数
  let add1 = (a, b = 10) => {
    console.log(a + b)
  }
  add1(10)

  // 多个参数返回
  let add2 = (a, b) => {
    return a + b
  }
  console.log(add2(1, 2));

  // 单个参数返回， 
  let add3 = a => a + 5
  console.log(add3(5));

  let hello = () => 'hello ' + 'chengjunyu'
  console.log(hello());

  // let getObj = id => {
  //   return {
  //     id: id,
  //     name: 'chengjunyu'
  //   }
  // }
  let getObj = id => ({
    id: id,
    name: 'zhangsan'
  })
  console.log(getObj(1))

  let hello_es6 = function() {
    return function() {
      return 'hello_es6'
    }
  }()
  console.log(hello_es6())

  let hello_es6_2 = (() => {
    return () => 'hello_es6_2'
  })()
  console.log(hello_es6_2());

  // 没有this绑定
  // es5中的this指向：取决于调用该函数的上下文对象，通过bind函数修改this指向
  let pageHandler_es5 = {
    id: 1,
    init: function() {
      document.addEventListener('click', function (event) {
        console.log('function函数的作用域：', this);
        this.doSomething(event.type)
      }.bind(this), false)
    },
    doSomething: function(type) {
      console.log(`事件类型：${type}，当前ID：${this.id}`);
    }
  }
  pageHandler_es5.init()

  // es6中的this指向：使用箭头函数，箭头函数没有this指向，箭头函数内部this值智能通过查找作用域链来确定
  let pageHandler_es6 = {
    id: 2,
    init: function () {
      document.addEventListener('click', (event) => {
        console.log("箭头函数的作用域：", this);
        this.doSomething(event.type)
      })
    },
    doSomething: function(type) {
      console.log(`事件类型：${type}，当前ID：${this.id}`);
    }
  }
  pageHandler_es6.init()

  // 使用箭头函数的注意事项
  // 1、使用箭头函数，函数内部没有arguments
  // let getVal = (a, b) => {
  //   console.log(arguments)
  //   return a + b
  // }
  // getVal(1,2)

  // 2、箭头函数不能使用new关键字来实例化对象，function函数是一个对象，箭头函数不是，它就是一个语法糖
  let Person = () => {

  }
  console.log(Person);
  let p = new Person



</script>
</html>